<template>
	<view>
		<view style="background-color: #fff;">
			<view style="border-radius: 0 0 40rpx 40rpx; height: 321rpx;background-image: linear-gradient(to bottom,#FF4A2B,#FF4141);padding: 81rpx 30rpx 0;">
				<view style="color: #fff; margin: 0 30rpx 41rpx 0;display: flex;align-items: center;justify-content: space-between;">
					<view>
						<image src="/static/waimai/返回@2x.png" style="margin-right: 21rpx; width: 18rpx;height: 32rpx;" mode="aspectFit" @click="backTo()"></image>
						<text style="font-size: 32rpx;">商城</text>
					</view>
					
					<view class="lw bgc" style="position: relative;right: 30%;">
						<text style="font-size: 16rpx;color: #FF423F;background-color: #fff;border-radius: 50%;position: absolute;top: -20rpx;right: -35rpx;box-sizing: border-box;">
							126
						</text>
						<image src="/static/index/图层%2034@2x.png" style="width: 37rpx;height: 37rpx;" mode="aspectFit" @click="toGwcPage"></image>
					</view>
				</view>
				<view style="position: relative;">
					<image src="/static/index/搜索@2x.png" style="width: 24rpx;height: 24rpx;position: absolute;top: 25rpx;left: 20rpx;" mode="aspectFit"></image>
					<input
						type="text"
						value=""
						placeholder-style="font-size:24rpx;color:#9EA9B7;"
						placeholder="请输入商品名称"
						style="padding-left: 64rpx; width: 690rpx;height: 72rpx;background-color: #F4F4F4;border-radius: 15rpx;box-sizing: border-box;"
					/>
				</view>
			</view>
			<view class="banner-swiper screen-swiper square-dot">
				<view style="margin: -120rpx 20rpx 0;">
					<swiper indicator-dots="true" indicator-color="#CBCCCE" indicator-active-color="#fff" :autoplay="false" interval="" duration="">
						<swiper-item v-for="(item, index) in 3" :key="index">
							<view><image src="" style="width: 710rpx;height: 215rpx;background-color: #FBB792;border-radius: 10rpx;" mode="aspectFill"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view>
				<uni-grid :column="5" :showBorder="false">
					<uni-grid-item v-for="(item, index) in fl1" :key="index" style="margin-top: -50rpx;">
						<navigator :url="`/pages/${item.url}/${item.url}`">
							<view style="display: flex; flex-direction: column; align-items: center;">
								<image :src="`/static/sc/${item.icon}`" mode="aspectFit" style="width: 84rpx; height: 84rpx;"></image>
								<text style="color: #666666;font-size: 24rpx;margin-top: 20rpx;">{{ item.title }}</text>
							</view>
						</navigator>
					</uni-grid-item>
				</uni-grid>
				<uni-grid :column="5" :showBorder="false">
					<uni-grid-item v-for="(item, index) in fl2" :key="index" style="margin-top: 20rpx;">
						<navigator :url="`/pages/${item.url}/${item.url}`">
							<view style="display: flex; flex-direction: column; align-items: center;">
								<image :src="`/static/sc/${item.icon}`" mode="aspectFit" style="width: 84rpx; height: 84rpx;"></image>
								<text style="color: #666666;font-size: 24rpx;margin-top: 20rpx;">{{ item.title }}</text>
							</view>
						</navigator>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view style="width: 690rpx;height: 356rpx;background-color: #FDE9E8;border-radius: 8rpx;margin: 30rpx;">
				<view
					style="width: 404rpx;height: 76rpx;background-image: linear-gradient(to right,#FF2404,#FF9B60);border-radius: 8rpx;display: flex;align-items: center;padding-left: 15rpx;"
				>
					<text style="font-size: 34rpx;color: #fff;font-weight: bold;">限时抢购</text>
					<uni-countdown color="#FF0700" background-color="#fff" :showDay="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
				</view>
				<view style="display: flex;margin-left: 17rpx;">
					<view
						v-for="(item, index) in 3"
						:key="index"
						style="border-radius: 8rpx; display: flex;flex-direction: column;margin: 43rpx 11rpx 30rpx 0rpx;width: 140rpx;height: 208rpx;background-color: #fff;align-items: center;justify-content: center;"
					>
						<image src="" style="width: 91rpx;height: 99rpx;background-color: #C5E3DB;" mode="aspectFill"></image>
						<text style="font-size: 18rpx;color: #141414;margin-top: 8rpx;">¥3399.0</text>
						<text style="font-size: 20rpx;color: #939393;">¥4400.0</text>
					</view>
					<view
						style="margin-top: -50rpx; width: 200rpx;height: 298rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 8rpx;"
					>
						<image src="" style="width: 113rpx;height: 145rpx;background-color: #C5E3DB;" mode="aspectFill"></image>
						<text style="font-size: 18rpx;color: #141414;margin-top: 8rpx;">¥66.9</text>
						<button
							type="default"
							style="font-size: 20rpx;color: #fff;width: 167rpx;height: 42rpx;border-radius: 21rpx;background-image: linear-gradient(to bottom,#FF8F57,#FF3311);display: flex;align-items: center;justify-content: center;"
						>
							立即抢购
						</button>
					</view>
				</view>
			</view>
			<view class="horizonal-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in nav" :key="index">
						<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
							<view style="display: flex;align-items: center;">
								<image :src="`/static/sc/${item.icon}`" style="width: 34rpx;height: 34rpx;" mode="aspectFit"></image>
								<text style="margin-left: -10rpx;font-size: 26rpx;color: #333;">{{ item.title }}</text>
							</view>
							<view class="select"></view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view v-if="tabIndex===0">
			<view style="display: flex;margin: 30rpx 30rpx 0;">
				<view @click="toPage" class="list" style="width: 334rpx;height: 553rpx;margin-right:22rpx ;">
					<image src="" mode="aspectFill"></image>
					<view style="margin-left: 20rpx;">
						<view style="display: flex;align-items: center;">
							<text class="cx">促销</text>
							<text class="title">超级无敌 纯羊绒</text>
						</view>
						<view style="margin: 18rpx 0;">
							<text class="mj">满39减5</text>
							<text class="gold" style="width: 117rpx;height: 34rpx;margin-left: 7rpx;">金币抵¥8.1</text>
						</view>
						<text class="price">¥27</text>
					</view>
				</view>
				<view @click="toPage" class="list2" style="width: 334rpx;height: 507rpx;" >
					<image src="" mode="aspectFill"></image>
					<view style="margin-left: 20rpx;">
						<view style="display: flex;align-items: center;">
							<text class="cx">促销</text>
							<text class="title">超级无敌 纯羊绒</text>
						</view>
						<view style="margin: 18rpx 0;">
							<text class="mj">满39减5</text>
							<text class="gold" style="width: 117rpx;height: 34rpx;margin-left: 7rpx;">金币抵¥8.1</text>
						</view>
						<text class="price">¥27</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hour: 0,
			minute: 40,
			second: 59,
			nav: [
				{ icon: '精选-选中@2x.png', title: '精选', url: '' },
				{ icon: '上新@2x.png', title: '每日上新', url: '' },
				{ icon: '皇冠 冠军@2x.png', title: '爆款好物', url: '' },
				{ icon: '拼团@2x.png', title: '限时拼团', url: '' },
				{ icon: '卡券(1)@2x.png', title: '卡券', url: '' }
			],
			fl1: [
				{ icon: 'fs.png', title: '服饰', url: '' },
				{ icon: 'sp.png', title: '食品', url: '' },
				{ icon: 'mz.png', title: '美妆', url: 'beauty' },
				{ icon: 'dq.png', title: '电器', url: '' },
				{ icon: 'yd.png', title: '运动', url: '' }
			],
			fl2: [
				{ icon: 'sj.png', title: '手机', url: '' },
				{ icon: 'xb.png', title: '鞋包', url: '' },
				{ icon: 'bh.png', title: '百货', url: '' },
				{ icon: 'yy.png', title: '医药', url: '' },
				{ icon: 'jj.png', title: '家居', url: '' }
			],
			tabIndex: 0
		};
	},
	methods: {
		toggleTab(index) {
			this.tabIndex = index;
		},
		toGwcPage(){
			uni.navigateTo({
				url:'/pages/gwc/gwc'
			})
		},
		toPage(){
			uni.navigateTo({
				url:'/pages/beauty/beauty'
			})
		}
	}
};
</script>

<style lang="scss">
.mj,.gold{
	width: 86rpx;height: 34rpx;
	border: 2rpx solid #D69993;
	border-radius: 6rpx;
	font-size: 18rpx;
	color: #D53128;
	padding: 1rpx 4rpx;
}
.title{
	width: 200rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	font-size: 25rpx;
	color: #2F2F2F;
}	
.cx{
	width: 50rpx;
	height: 28rpx;
	border-radius: 6rpx;
	background-color: #F55519;
	font-size: 18rpx;
	color: #fff;
	padding: 1rpx 4rpx;
	margin-right: 10rpx;
}
.price{
	font-size: 24rpx;
	color: #F55519;
}
.list image{
	width: 259rpx;
	height: 236rpx;
	background-color: #D6AEB9;
	margin: 102rpx 39rpx 40rpx 38rpx;	
}
.list2 image{
	width: 259rpx;
	height: 236rpx;
	background-color: #D6AEB9;
	margin: 71rpx 40rpx 30rpx 34rpx;	
}
.list,.list2{
	margin-top: 32rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
page{
	background-color: #F2F2F2;
}
.select {
	display: none;
	width: 60rpx;
	height: 6rpx;
	background-color: #FF492E;
	margin-left: 20rpx;
	border-radius: 4rpx;
}
.horizonal-tab .active {
	.select {
		display: block;
		margin-top: -10rpx;
	}
}
.scroll-tab {
	white-space: nowrap; /* 必要，导航栏才能横向*/
	cursor: pointer;
	height: 140rpx;
	line-height: 100rpx;
	overflow-x: scroll;
}
.scroll-tab-item {
	display: inline-block; /* 必要，导航栏才能横向*/
	margin: -20rpx 30rpx ;
}
//设置轮播的指示点大小
.banner-swiper {
	/deep/ .uni-swiper-dots {
		// 指示点整个区域
		bottom: 100rpx;
	}
	/deep/ .uni-swiper-dot {
		// 指示点元素默认样式
		width: 40rpx !important;
		height: 6rpx !important;
		border-radius: 2rpx;
	}
}
</style>
